<template>

  <div class="login-container">
    <div class="login-box">
          <slot></slot>
    </div>
  </div>


</template>

<script lang='ts'>
import { defineComponent,ref } from 'vue'
export default defineComponent({
    name: 'login-box',
    props:{

    },
    setup(props){


        return {

        };
    }
})
</script>

<style lang='less' scoped>
    .login-container{
       min-width: 400px;

      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative;

       &::before{
        content:"";
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: -20px;
        background-image:  url('../assets/bg02.jpg');
        filter: blur(20px);

      }

       .login-box{
        position: relative;
        width: 400px;
        height: 550px;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        overflow: hidden;
        &::after{
           content:'';
           z-index:-1;
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           margin: -15px;
           background-color: rgba(245,245,245, .5);
           filter: blur(15px);
          
        }
      
      }
     
    }
    
   
</style>